// 设定 当前页数 默认是 第一页
// let page = 1;

// 根据 浏览器地址栏参数 发送请求 
// 调用函数 输入 当前页数 参数 

// setPage() 中 调用的 ajax请求 
// 是 异步程序 会在所有的同步程序执行结束之后 才会执行
// 所有和 ajax异步请求结束之后需要执行的 和 ajax异步请求相关的操作
// 都要写在 函数中 


// 将需要执行的程序 定义在 加载事件中 确保html标签加载完毕再触发执行
$(function () {
  // 默认显示 第一页内容
  setPage(1);
})








// 使用 async 封装定义 函数 
async function setPage(page) {
  // 获取 浏览器地址栏数据参数 
  const urlObj = getUrlValObj();

  // 设定 每页显示的数据数量
  let line = 4;

  // 发送ajax请求 
  let res = await myPromiseAjax({
      url: '../server/goods_list.php',
      type: 'get',
      data: {
          cat_one_id: urlObj.cat_one_id,
          line: line,
          page: page,
      },
  });

  res = JSON.parse(res);
  console.log(res);

  // 根据数据 动态生成页面 
  let str = '';

  // 循环遍历 res.data 数组
  res.data.forEach(item => {
      str += `
        <li class="list-item">
          <div class="panel panel-primary">
            <div class="panel-body">
              <ol class="breadcrumb">
                <li><a href="#">${item.cat_one_id}</a></li>
                <li><a href="#">${item.cat_two_id}</a></li>
                <li class="active">${item.cat_three_id}</li>
              </ol>
            </div>
            <div class="panel-footer">
              <div class="row">
                <div class="">
                  <div class="thumbnail">
                    <img
                      src="${item.goods_big_logo}"
                      alt="...">
                    <div class="caption">
                      <h3>${item.goods_name}</h3>
                      <p>
                        <i class="glyphicon glyphicon-yen"></i>
                        <span>${item.goods_price}</span>
                      </p>
                      <p>
                        <a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a> 
                        <a href="../detail/index.html?goods_id=${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        
        
        `;

      // 将 结果 写入 ul标签中
      $('.container ul').html(str);

  })


  // 在 ajax异步程序执行结束之后 
  // 调用插件 生成分页器 
  // 利用分页器插件 生成 分页效果
  // 以对象的形式 设定 分页器插件需要的配置参数
  // 其中一些数据是 根据 响应体结果 设定的 
  $('[name="p"]').pagination({
      pageCount: res.sumPage,             //  总页数
      totalData: res.row,                  //  数据总数量
      current: page,                      //  当前第几页
      showData: res.line,                  //  每页数据数量
      prevCls: 'prev',                    //  上一页 class 类名
      nextCls: 'next',                    //  下一页 class 类名
      prevContent: '上一页',              //  上一页 内容
      nextContent: '下一页',              //  下一页 内容
      activeCls: 'active',                //  选中页 class 类名
      mode: 'fixed',                      //  分页器插件显示状态 fixed固定模式 unfixed不固定模式
      count: 4,                           //  除了选中页 其他分页按钮的个数 也就是 页数总按钮 是 设置的数值 + 1 
      coping: true,                       //  true开启首页末页  false关闭首页末页
      homePage: '首页',                   //  首页节点内容
      endPage: '末页',                    //  末页节点内容
      isHide: true,                       //  总页数为 0 或者 1 时 隐藏分页控件
      keepShowPN: false,                  //  是否一直显示 上一页 下一页 只有显示模式设定为 unfixed 才能执行
      jump: true,                         //  开启 跳转页
      callback: function (result) {        //  回调函数 点击分页器按钮 执行页面跳转触发 回调函数的形参存储 分页器按钮的数据信息

          //  再次调用函数 根据触发的分页器按钮页数 发送请求
          setPage(result.getCurrent());

      }
  });
}

/*
    1,  获取数据 
      获取 浏览器地址栏 传参的 一级分类名称 

      向数据库发送请求 

        向 server/goods_list.php 发送请求

          以 get 方式 发送请求 
          携带 3个参数 
              cat_one_id      一级分类名称 
              page            当前显示的页数 默认是 第一页 
              line            每页显示的数据数值 根据实际项目需求设定 

      因为 async 声明的函数 特殊的执行方式 
          我们在 函数中 获取 浏览器地址栏参数 每页显示的数据数量
          传参 当期是第几页

    2,  响应体数据说明

      data: (4) [{…}, {…}, {…}, {…}]
        当前页的4条数据信息

      line: "4"
        当前页数据数量

      page: "1"
        当前是第几页

      row: "93"
        当前分类数据总数量

      sumPage: 24
        总页数 

    3,  分页器
      (1) 导入 js和css 外部文件 

      (2) 定一个div 通过 jQuery选择器 获取这个标签
          调用分页器插件 pagination() 函数方法 
          在选中的div中 生成分页器插件 标签内容

          $().pagination()

      (3) 通过设定 pagination() 函数方法的 参数 
          设定分页器插件的配置设定
        
      (4) callback 是 设定 点击分页器时 触发的回调函数
          需要给这个回调函数设定一个形参 

          存储 点击的分页器插件按钮相关的数据信息
  
          形参.getCurrent() 获取点击的分页器插件 对应的显示页数

      (5) 回调函数中设定的程序

          再次调用 页面动态渲染的函数setPage()
          参数是 形参.getCurrent() 中 存储的对应的显示页数 

          按照 需要显示的页数 再次发起请求 动态渲染生成页面
    4,  点击 查看商品详情 按钮 
        跳转 商品详情页 需要显示对应商品的相信信息

        需要向 商品详情页 传参 点击商品的 goods_id 
        也就是 点击商品 在数据库中的的编号序号


  */
